import React,{ReactElement} from 'react';
import { Itodo } from '../typings';
import Titem from './item'
interface IProps {
    todoList: Itodo[],
    removeTodo:(id:number) => void,
    toggleTodo:(id:number) => void
}

const TdList:React.FC<IProps> = ({
    todoList,
    removeTodo,
    toggleTodo,
}):ReactElement => {
    return(
        <div className="td_list">
            {
              todoList && todoList.map((todo:Itodo)=>{
                 return (
                     <Titem 
                     key={todo.id}
                     todo={todo}   
                     removeTodo= {removeTodo}
                     toggleTodo= {toggleTodo}
                   />
                 )
              })
            }
        </div>
    );
}
export default TdList;